<template>
    <div class="member">
        <el-table
            :header-cell-style="{color:'#555555'}"
            class="black"
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column
                prop="id"
                v-if="show = false">
            </el-table-column>
            <el-table-column
                prop="rechargeDays"
                label="会员期限（天）"
                align="center">
            </el-table-column>
            <el-table-column
                prop="rechargeAmount"
                label="充值金额（元）"
                align="center">
            </el-table-column>
            <el-table-column
                prop="dicount"
                label="折扣"
                align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="154">
                <template slot-scope="scope">
                    <el-button @click="onModClick(scope.row)" size="small">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="会员套餐编辑"
            :visible.sync="dialogVisible"
            width="30%">
            <el-form :label-position="labelPosition" label-width="120px">
                <el-input v-model="params.id" v-if="show = false"></el-input>
                <el-form-item label="会员期限" class="system-item">
                    <el-input v-model="params.rechargeDays"></el-input>
                </el-form-item>
                <el-form-item label="充值金额" class="system-item">
                    <el-input v-model="params.rechargeAmount"></el-input>
                </el-form-item>
                <el-form-item label="折扣" class="system-item">
                    <el-input v-model="params.dicount"></el-input>
                </el-form-item>
                <el-form-item class="system-item">
                    <el-button type="primary" @click="modData">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'member',
    data () {
        return {
            dialogVisible: false,
            labelPosition: 'left',
            tableData: [],
            params: {}
        }
    },
    created () {

    },
    mounted () {
        this.getList()
    },
    methods: {
        getList () {
            this.tableData = []
            this.$api.system.rechargeTypeList({}, res => {
                if (res.code === 200) {
                    let data = res.data
                    for (let i = 0; i < data.length; i++) {
                        this.tableData.push(data[i])
                    }
                }
            })
        },
        onModClick (row) {
            this.params['id'] = row.id
            this.params['rechargeDays'] = row.rechargeDays
            this.params['rechargeAmount'] = row.rechargeAmount
            this.params['dicount'] = row.dicount
            this.dialogVisible = true
        },
        modData () {
            console.log(this.params)
            this.$api.system.editRechargeType({'params': this.params}, res => {
                if (res.code === 200) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    #member {
        .system-item {
            position: relative;
            margin-bottom: 30px!important;
        }
        .el-button {
            position: absolute;
            top: 0;
            right: -100px;
            display: block;
        }
    }
</style>
